<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html>
    <head>
        <%@ include file="/commons/basejs.jsp" %>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>主页</title>
        <script type="text/javascript">
            $(function () {
                $('#autocomplete-ajax').autocomplete({
                    serviceUrl: '${path}/demo/autoCompleteData.do',
                    onSelect: function(suggestion) {
                        $('#country').val(suggestion.data);
                        //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                    },
                    onHint: function (hint) {
                        $('#autocomplete-ajax-x').val(hint);
                    }
                });

                var countries = [
                    { value: 'Andorra', data: 'AD' },
                    { value: 'Zimbabwe', data: 'ZZ' }
                ];

                $('#autocomplete-ajax1').autocomplete({
                    lookup:countries,
                    onSelect: function(suggestion) {
                        $('#city').val(suggestion.data);
                        //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                    },
                    onHint: function (hint) {
                        $('#autocomplete-ajax1-x').val(hint);
                    }
                });
            });
            
            function get1() {
                alert($("#country").val())
            }

            function get2() {
                alert($("#city").val())
            }

            function set1() {
                $("#country").val("b1");
                $("#autocomplete-ajax").val("Bottom");
            }

            function set2() {
                $("#city").val("ZZ")
                $("#autocomplete-ajax1").val("Zimbabwe")
            }
        </script>
    </head>
    <body>
        <h1>Ajax自动补全，输入a</h1>
        <div style="position: relative; height: 80px;">
            <input type="text" name="country" id="country" value="" hidden/>
            <input type="text" id="autocomplete-ajax" style="position: absolute; z-index: 2; background: transparent;"/>
            <input type="text" id="autocomplete-ajax-x" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;"/>
        </div>
        <button onclick="get1();">获取值</button>
        <button onclick="set1();">设置值</button>

        <br/>
        <br/>
        <br/>
        <br/>

        <h1>本地自动补全，输入a</h1>
        <div style="position: relative; height: 80px;">
            <input type="text" name="city" id="city" value="" hidden/>
            <input type="text" name="country" id="autocomplete-ajax1" style="position: absolute; z-index: 2; background: transparent;"/>
            <input type="text" name="country" id="autocomplete-ajax1-x" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;"/>
        </div>
        <button onclick="get2();">获取值</button>
        <button onclick="set2();">设置值</button>
    </body>
</html>

</body>
